<template>
  <div>
    <vab-card shadow="always">
      <template #default>
        <div class="flex_sb">
          <div class="flex leve_title">
            需求详情
            <span>-{{ order_no }}</span>
          </div>
          <div class="flex_just_end">
            <el-button size="small" @click="handleClick('back')">
              返回
            </el-button>
          </div>
        </div>
      </template>
    </vab-card>
    <!-- 基础信息 -->
    <VabCard>
      <template #header>
        <span class="leve2_title">基础信息</span>
      </template>
      <template #default>
        <el-row :gutter="24" v-loading="loading">
          <el-col
            v-for="(item, i) in DetailBase"
            :key="i"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="8"
            :xl="8"
          >
            <div class="detail-mode" v-if="baseData">
              <span class="label">{{ item.label }}</span>
              <span
                class="text height"
                :title="_BaseFormat(baseData[item.prop], item.prop)"
              >
                {{ _BaseFormat(baseData[item.prop], item.prop) }}
              </span>
            </div>
          </el-col>
        </el-row>
      </template>
    </VabCard>
    <!-- 产品价格信息 -->
    <VabCard>
      <template #header>
        <span class="leve2_title">产品价格信息</span>
      </template>
      <template #default>
        <el-table
          border
          max-height="420"
          style="width: 100%"
          :data="product"
          row-key="serial_number"
          v-loading="loading"
          default-expand-all
        >
          <el-table-column label="序号" align="center" width="100">
            <template #default="{ row }">
              <span>{{ row.serial_number }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, i) in DetailCloums"
            :key="i"
            min-width="100"
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :align="
              item.type == 'money' || item.type == 'number' ? 'right' : 'center'
            "
          >
            <template #header>
              <span class="text_center">{{ item.label }}</span>
            </template>
            <template #default="scope">
              <!-- 自定义 -->
              <div v-if="item.type == 'custom'">
                <span v-if="item.prop == 'status'">
                  <el-tag :type="statusColor(scope.row.status)">
                    {{ OrderStatus(scope.row.status, scope.row) }}
                  </el-tag>
                </span>
              </div>
              <!-- 正常 -->
              <div v-else class="ellipsis">
                {{ _FieldFormat(scope.row[item.prop], item.type) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </VabCard>
  </div>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'ProcureDetail',
  })
  import { customerOrderInfo } from '~/src/api/dms/customerOrder'
  /**
   * @import
   */
  import { FieldFormat, StrSplit } from '~/src/utils/utils'
  import { DetailBase, DetailCloums, OrderStatus } from './components/tools'
  /**
   * @var
   */
  const router = useRouter()
  const route = useRoute()
  const { order_no } = route.query

  let baseData = reactive<any>(null)
  let product = ref<any>([])
  let loading = ref(false)

  /**
   * @method
   */

  // 字段级格式化
  const _FieldFormat = (value: string, type = '') => {
    return FieldFormat(value, type, 2)
  }

  // 字段级格式化
  const _BaseFormat = (value: string, prop = '') => {
    if (!value) return '--'
    if (prop == 'pay_type') {
      if (value == '1') return '运费到付'
      if (value == '2') return '运费预付'
    }
    if (prop == 'shipping_address') {
      return (
        baseData.shipping_province +
        baseData.shipping_city +
        baseData.shipping_district
      )
    }
    return value
  }

  // 生效状态tag_color
  const statusColor = (value: number) => {
    if (value == 0) return 'warning'
    if (value == 1) return 'success'
    return 'info'
  }

  const handleClick = async (value: any) => {
    if (value == 'back') {
      router.go(-1)
      return
    }
  }
  const _CustomerPriceInfo = async () => {
    loading.value = true
    try {
      const res = await customerOrderInfo({ order_no })
      baseData = res.data

      const detail = res.data.detail

      const list = detail.map((item: any) => {
        return {
          ...item,
          father_key:
            item.goods_type == '赠品'
              ? StrSplit(item.serial_number, '.', 0)
              : '',
          son_key:
            item.goods_type == '赠品'
              ? StrSplit(item.serial_number, '.', 1)
              : '',
          children: [],
        }
      })

      const fatherArray = list.filter((item: any) => {
        if (item.goods_type != '赠品') return item
      })
      const sonArray = list.filter((item: any) => {
        if (item.goods_type == '赠品') return item
      })

      await fatherArray.forEach((item: any, i: number) => {
        sonArray.forEach((jtem: any) => {
          if (item.serial_number == jtem.father_key) {
            item.children.push(jtem)
          }
        })
      })

      product.value = fatherArray

      loading.value = false
    } catch (error) {}
  }

  onMounted(() => {
    _CustomerPriceInfo()
  })
</script>

<style scoped lang="scss">
  .height {
    display: inline-block;
    max-height: 48px;
    overflow-y: auto;
  }

  .remark {
    display: flex;

    .label {
      display: inline-block;
      width: 122px;
      text-align: right;
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
    }

    .text {
      flex: 1;
      border: 1px solid #c0c0c0;
      color: #a9a9a9;
      border-radius: 4px;
      padding: 0px 10px;
      height: 40px;
      overflow-y: auto;
    }
  }

  .expand {
    padding-left: 47px;
  }
  .giftBox {
    :deep() {
      thead .is-leaf {
        background-color: #fff8e1 !important;
      }
      thead .is-leaf .cell {
        font-size: 12px;
      }
    }
  }
  .fon_12 {
    font-size: 12px;
  }
</style>
